<template>
  <div class="header-select">
    <el-select
      :placeholder="placeholder"
      :teleported="false"
      @change="changeSelected"
      v-model="selectedValue"
    >
      <template #prefix>
        <span class="select-bg"><img :src="getIconAssetURL(images)" /></span>
      </template>
      <el-option
        :label="item.name"
        :value="item.id"
        :key="index"
        v-for="(item, index) in defineOptions"
      />
    </el-select>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { getIconAssetURL } from '@/utils/loadAssets'
const selectedValue = ref('')
const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  defineOptions: {
    type: Object,
    default: () => ({})
  },
  images: {
    type: String,
    default: ''
  }
})
let once = ref(0)
watch(
  () => props.defineOptions,
  () => {
    // 如果once等于0，则只执行一次

    if (once.value == 0) {
      changeSelected(props.defineOptions[0].id)
      selectedValue.value = props.defineOptions[0].id
    }
    once.value = 1
  },
  {
    // immediate: true,
    deep: true
  }
)
const emit = defineEmits(['changeSelect'])
function changeSelected(item) {
  // console.log(item)
  emit('changeSelect', item, selectedValue.value)
}
</script>
<style lang="less" scoped>
.el-select {
  //下拉框
  :deep(.el-select-dropdown) {
    border: none !important;
    background-color: rgba(1, 28, 82, 0.8);
  }
}

//输入框
.el-input__inner {
  color: #eee;
  border-color: #00fff6;
  background-color: rgba(1, 28, 82, 0.8);
}
//聚焦时的样式
.el-select .el-input.is-focus .el-input__inner {
  border-color: #0b61aa;
  background-color: rgba(1, 28, 82, 0.8);
  color: #00d3e9;
}
//下拉框选中
.el-select-dropdown__item {
  color: #eee;
  background-color: rgba(1, 28, 82, 0.8);
}
//鼠标经过下拉框
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #00d3e9;
  background-color: #0f3360;
}
.header-select {
  width: 250px !important;

  .select-bg {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  :deep(.el-input__wrapper) {
    background: rgba(40, 64, 124, 0.8);
    box-shadow: inset 0 0 12px 1px rgb(39 151 255 / 49%);
  }
  :deep(.el-input__inner) {
    color: white;
  }
  // :deep(.el-icon) {
  //   // background: url(@/assets/images/u101.png) no-repeat;
  // }
  // :deep(.el-input__wrapper) {
  //   border: 1px solid #169bd5;
  // }
}
</style>
